<template>
  <div class="page_padding">
    <MyNavBar @goback="goback" title="评议栏"></MyNavBar>
    <div class="cont-box">
      <van-tabs
        @click="onTabsClick"
        color="#d80a06"
        line-width="35"
        line-height="2"
        border
        swipeable
        title-active-color="#d80a06"
        title-inactive-color="#333333"
        v-model="tabsActive"
        class="appraTabSec"
        :sticky="true"
        ref="tabs">
        <van-tab name="0" title="待评议" title-class="my_tab"></van-tab>
        <van-tab name="1" title="已评议" title-class="my_tab"></van-tab>
      </van-tabs>
      <template v-if="personList.length > 0">
        <van-collapse v-model="activeNames" accordion :border="false" @change="getChange()">
          <van-collapse-item :name="item.needDealId" v-for="item in personList" :key="item.needDealId">
            <template #title>
              <div class="list_title">{{ item.title }}</div>
            </template>
            <div class="list" v-for="items in item.userStatusVOS" :key="items.userId">
              <div class="info">
                <div class="user-head">
                  <van-image
                    class="user-icon"
                    :src="items.headUrl"
                    round
                    width="39px"
                    height="39px"
                    fit="cover"
                    v-if="items && items.headUrl"></van-image>
                  <van-image
                    class="user-icon"
                    :src="items.gender === '女' ? circleUrlW : circleUrlM"
                    round
                    width="39px"
                    height="39px"
                    fit="cover"
                    v-else></van-image>
                </div>
                <div class="user-info">
                  <div class="info_name">{{ items.userName }}</div>
                  <div class="info_offic">{{ items.orgAlias }}</div>
                </div>
              </div>
              <div class="quarter_list">
                <div class="unnull" v-if="items.status == '0'">未提交</div>
                <div @click="appraise(items, item)" v-else>{{ tabsActive == '0' ? '去评议' : '查看' }}</div>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
      </template>
      <van-empty v-if="personList.length == 0" description="暂无数据" />
    </div>
  </div>
</template>

<script>
import { getCommentData } from '@api/api-comment.js'
import MyNavBar from '@com/MyNavBar'
export default {
  name: 'appraistPage',
  props: {},
  data() {
    return {
      tabsActive: '0', //二级tab
      personList: [],
      pageNum: 1,
      pageSize: 200,

      tabLeader: false,
      tabShow: false,
      activeNames: '',
      circleUrlM: require('@images/user-icon.png'),
      circleUrlW: require('@images/user-icon-G.png'),
    }
  },
  computed: {},
  created() {
    this.$store.state.stateAlive = true
    this.getCommentData()
  },
  activated() {
    if (!this.$store.state.stateAlive) {
      this.getCommentData()
    }
  },
  mounted() {},
  watch: {},
  methods: {
    onTabsClick() {
      this.personList = []
      this.getCommentData()
    },
    getCommentData() {
      getCommentData({
        status: Number(this.tabsActive),
      }).then(res => {
        this.personList = res.data
        if (res.data.length > 0) {
          this.activeNames = res.data[0].needDealId
        }
      })
    },
    goback() {
      this.$router.go(-1)
    },
    appraise(itemChild, item) {
      if (this.tabsActive == 0) {
        this.$router.push({
          path: '/evaluate',
          query: {
            recordType: itemChild.recordType,
            busSign: itemChild.busSign,
            saScoringId: itemChild.saScoringId,
            userId: itemChild.userId,
            needId: item.needDealId,
            isEnd: true,
          },
        })
      } else {
        this.$router.push({
          path: '/evaluate',
          query: {
            saScoringId: itemChild.saScoringId,
            recordType: itemChild.recordType,
            busSign: itemChild.busSign,
            userId: itemChild.userId,
            needId: item.needDealId,
          },
        })
      }
    },
    getChange() {},
  },
  components: {
    MyNavBar,
  },
}
</script>

<style lang="scss" scoped>
.page_padding {
  height: 100%;
  width: 100%;
  .cont-box {
    height: 100%;
    background: #f7f7f7;
    /deep/.van-tabs__wrap {
      height: 40px;
      border-bottom: 1px solid #efefef;
      padding: 0 0;
      background: #fff;
      .van-tab__text {
        line-height: 40px;
        // font-size: 14px;
      }
      .van-tabs__nav {
        width: 50%;
      }
    }
    .appraTabSec {
      /deep/.van-tabs__nav {
        width: 100%;
      }
    }
    .list {
      padding: 10px 14px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: solid 1px #efefef;
      .iconfont {
        font-size: 25px;
        color: #929191;
      }
      .info {
        display: flex;
        align-items: center;
        .user-head {
          width: 39px;
          height: 39px;
        }
        .user-info {
          margin-left: 10px;
          .info_name {
            color: #004db6;
          }
          .info_offic {
            color: #999999;
            font-size: 13px;
          }
        }
      }
      .quarter_list {
        div {
          background-color: #004db6;
          border-radius: 2px;
          color: #ffffff;
          font-size: 14px;
          float: right;
          width: 70px;
          height: 28px;
          text-align: center;
          line-height: 28px;
        }
        .unnull {
          background-color: #fef0f0;
          color: #f56c6c;
        }
      }
    }
    /deep/.van-tab {
      width: 60px !important;
    }
  }
}
</style>
